<template>
  <div class="confirm-table-wrapper">
    <h2 class="title">成交确认单</h2>
    <table class="confirm-table">
      <!-- 交易类型 -->
      <thead></thead>
      <tbody>
        <tr>
          <td class="label">交易类型</td>
          <td colspan="6">
            <el-checkbox-group v-model="dealAll.transactionType">
              <el-checkbox
                v-for="item in tradeTypeOptions"
                :key="item.id"
                :label="item.businessName"
                :disabled="true"
                :value="item.id"
              ></el-checkbox>
            </el-checkbox-group>
            <!-- {{ dealAll.transactionTypeName }} -->
          </td>
        </tr>

        <!-- 房屋位置 -->
        <tr>
          <td class="label">房屋位置</td>
          <td colspan="4">{{ dealAll.houseLocation }}</td>
          <td class="label">出售总价</td>
          <td colspan="">{{ dealAll.totalPrice }}元</td>
        </tr>

        <tr>
          <td class="label">成交日期</td>
          <td colspan="2">{{ dealAll.saleDate }}</td>
          <td class="label">合同编号</td>
          <td>{{ dealAll.contractNo }}</td>
          <td class="label">签约员</td>
          <td>{{ dealAll.signatoryName }}</td>
        </tr>

        <tr>
          <td class="label">卖方姓名</td>
          <td colspan="2">{{ dealAll.sellerName }}</td>
          <td class="label" rowspan="2">买方姓名</td>
          <td colspan="3" rowspan="2">{{ dealAll.buyerName }}</td>
        </tr>
        <tr>
          <td class="label">卖方共有人</td>
          <td colspan="2">{{ dealAll.serviceFeeCommonSellerName }}</td>
        </tr>

        <!-- 服务费部分 -->
        <tr>
          <td class="label">服务费</td>
          <td>交 {{ dealAll.serviceFeeSeller }} 元</td>
          <td>欠 {{ dealAll.serviceFeeSellerDebt }} 元</td>
          <td class="label">服务费</td>
          <td>交 {{ dealAll.serviceFeeBuyer }} 元</td>
          <td>欠 {{ dealAll.serviceFeeBuyerDebt }} 元</td>
          <td></td>
        </tr>
        <tr>
          <td class="label">服务费代收</td>
          <td>交 {{ dealAll.serviceFeeProxySeller }} 元</td>
          <td>欠 {{ dealAll.serviceFeeProxySellerDebt }} 元</td>
          <td class="label">服务费代收</td>
          <td>交 {{ dealAll.serviceFeeProxyBuyer }} 元</td>
          <td>欠 {{ dealAll.serviceFeeProxyBuyerDebt }} 元</td>
          <td></td>
        </tr>
        <tr>
          <td class="label">交易费</td>
          <td>交 {{ dealAll.transactionFeeSeller }} 元</td>
          <td>欠 {{ dealAll.transactionFeeSellerDebt }} 元</td>
          <td class="label">交易费</td>
          <td>交 {{ dealAll.transactionFeeBuyer }} 元</td>
          <td>欠 {{ dealAll.transactionFeeBuyerDebt }} 元</td>
          <td></td>
        </tr>
        <tr>
          <td class="label">交易费代收</td>
          <td>交 {{ dealAll.transactionFeeProxySeller }} 元</td>
          <td>欠 {{ dealAll.transactionFeeProxySellerDebt }} 元</td>
          <td class="label">交易费代收</td>
          <td>交 {{ dealAll.transactionFeeProxyBuyer }} 元</td>
          <td>欠 {{ dealAll.transactionFeeProxyBuyerDebt }} 元</td>
          <td></td>
        </tr>
        <tr>
          <td class="label">代理服务费</td>
          <td>交 {{ dealAll.agencyServiceFeeSeller }} 元</td>
          <td>欠 {{ dealAll.agencyServiceFeeSellerDebt }} 元</td>
          <td class="label">代理店面</td>
          <td colspan="3">{{ dealAll.regionName + dealAll.storeName }}</td>
        </tr>
        <tr>
          <td class="label">代理服务费代收</td>
          <td>交 {{ dealAll.agencyServiceFeeProxySeller }} 元</td>
          <td>欠 {{ dealAll.agencyServiceFeeProxySellerDebt }} 元</td>
          <td class="label">代理人</td>
          <td colspan="3">{{ dealAll.brokerName }}</td>
        </tr>
        <tr>
          <th class="label">分成项目类别</th>
          <th class="label">区域</th>
          <th class="label">店面</th>
          <th class="label">经纪人</th>
          <th class="label">分成比例</th>
          <th class="label">分成金额</th>
          <th class="label">不分成原因</th>
        </tr>
        <tr
          class="tc"
          v-for="item in dealAll.sysHzBusinessDistributionList"
          :key="item.id"
        >
          <td>{{ item.businessName }}</td>
          <td>{{ item.distributionObj?.regionName }}</td>
          <td>{{ item.distributionObj?.storeName }}</td>
          <td>{{ item.distributionObj?.agentName }}</td>
          <td>
            {{
              item.distributionObj?.distributionRatio
                ? `${item.distributionObj?.distributionRatio}%`
                : ""
            }}
          </td>
          <td>
            {{
              item.distributionObj?.distributionAmount
                ? `${item.distributionObj?.distributionAmount}元`
                : ""
            }}
          </td>
          <td>{{ item.distributionObj?.noDistributionReason }}</td>
        </tr>

        <tr class="tc">
          <td class="label" colspan="2">房源信息服务</td>
          <td>
            {{
              dealAll.sysHzHouseInformationList?.houseInformationOne
                ? `${dealAll.sysHzHouseInformationList?.houseInformationOne}%`
                : ""
            }}
          </td>
          <td colspan="2">
            {{ dealAll.sysHzHouseInformationList?.houseInformationTwo }}元
          </td>
          <td colspan="2">
            {{ dealAll.sysHzHouseInformationList?.houseInformationThree }}
          </td>
        </tr>
        <tr>
          <td class="label">权证员</td>
          <td colspan="6">
            <el-checkbox-group
              v-model="dealAll.sysHzHouseInformationList.warrantUserArr"
            >
              <el-checkbox
                v-for="item in warrantUsers"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="true"
              ></el-checkbox>
            </el-checkbox-group>
            <!-- {{ dealAll.sysHzHouseInformationList?.wrrantUserNames }} -->
          </td>
        </tr>
        <tr>
          <td class="label">信贷员</td>
          <td colspan="6">
            <el-checkbox-group
              v-model="dealAll.sysHzHouseInformationList.loanUserArr"
            >
              <el-checkbox
                v-for="item in loanUsers"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="true"
              ></el-checkbox>
            </el-checkbox-group>
            <!-- {{ dealAll.sysHzHouseInformationList?.loanUserNames }} -->
          </td>
        </tr>
        <tr class="tc" style="font-weight: 700">
          <td class="label" colspan="7">交易服务费分成情况</td>
        </tr>
        <tr>
          <td class="label">店长姓名</td>
          <td colspan="2">
            {{
              dealAll.sysHzTransactionServiceFeeDistribution?.branchManagerName
            }}
          </td>
          <td class="label">金额</td>
          <td>
            {{
              dealAll.sysHzTransactionServiceFeeDistribution?.storeAmount
                ? `${dealAll.sysHzTransactionServiceFeeDistribution?.storeAmount}元`
                : ""
            }}
          </td>
          <td class="label">公司</td>
          <td>
            {{
              dealAll.sysHzTransactionServiceFeeDistribution?.companyAmount
                ? `${dealAll.sysHzTransactionServiceFeeDistribution?.companyAmount}元`
                : ""
            }}
          </td>
        </tr>
        <tr>
          <td class="label tc" style="font-weight: 700" colspan="7">
            居间服务费分成情况
          </td>
        </tr>
        <tr class="tc">
          <td class="label"></td>
          <td class="label">区域</td>
          <td class="label">店面</td>
          <td class="label">经纪人</td>
          <td class="label">分成比例</td>
          <td colspan="2" class="label">分成金额</td>
        </tr>
        <tr
          v-for="item in dealAll.sysHzRoomServiceFeeDistributionList"
          :key="item.id"
          class="tc"
        >
          <td>{{ item.itemCategoryName }}</td>
          <td>{{ item.regionName }}</td>
          <td>{{ item.storeName }}</td>
          <td>{{ item.agentName }}</td>
          <td>{{ item.distributionRatio }}%</td>
          <td colspan="2">{{ item.distributionAmount }}元</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td colspan="2"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { listAllTransaction } from "@/api/contract/contractList";
import { getStationUserList } from "@/api/business/tcForm";
import { defineProps } from "vue";
const props = defineProps({
  msgData: {
    type: Object,
    required: true,
  },
});
const dealAll = reactive({ ...props.msgData });
console.log(dealAll);
dealAll.transactionType = [dealAll.transactionType];

if (dealAll.sysHzHouseInformationList) {
  dealAll.sysHzHouseInformationList.warrantUser =
    dealAll.sysHzHouseInformationList.warrantUser == null
      ? []
      : [dealAll.sysHzHouseInformationList.warrantUser];
  dealAll.sysHzHouseInformationList.loanUser =
    dealAll.sysHzHouseInformationList.loanUser == null
      ? []
      : [dealAll.sysHzHouseInformationList.loanUser];
} else {
}

// 可选交易类型
const tradeTypeOptions = ref([]);

function getTransactionList() {
  listAllTransaction().then((res) => {
    tradeTypeOptions.value = res.data;
  });
}
getTransactionList();

const warrantUsers = ref([]);
const loanUsers = ref([]);
async function getUsersList(stationName) {
  const { data } = await getStationUserList({ stationName });
  return data;
}
onMounted(async () => {
  warrantUsers.value = await getUsersList("quanzheng");
  loanUsers.value = await getUsersList("xindai");
});
</script>
<style scoped>
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
  border-color: #333;
  background-color: transparent;
}
:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after) {
  border-color: #333;
}
:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
  color: #333;
}
.confirm-table-wrapper {
  width: 100%;
  font-family: "SimSun", serif;
  font-size: 14px;
  padding: 10px;
}
.title {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}
.confirm-table {
  width: 80%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}
.confirm-table td,
.confirm-table th {
  border: 1px solid #000;
  padding: 4px 6px;
  height: 32px;
  vertical-align: middle;
}
.label {
  text-align: center;
  background-color: #f9f9f9;
  font-weight: bold;
  width: 18%;
}
.checkbox {
  display: inline-block;
  margin-right: 10px;
}
.tc {
  text-align: center;
}
</style>
